<script lang="ts" setup>
import { ref, nextTick } from 'vue';

const activeName = ref('site');
const show = ref(false);
nextTick(() => {
  document.documentElement.addEventListener('click', () => {
    show.value = false;
  });
});
</script>
<template>
  <div class="notification">
    <i class="fas fa-bars" @click.stop="show = !show"></i>
    <el-tabs v-model="activeName" class="lists" v-show="show" @click.stop>
      <el-tab-pane label="系统通知" name="site">
        <a href="#">Mollit fugiat labore amet laborum pariatur pariatur fugiat quis consectetur sit anim. </a>
        <a href="#">Mollit fugiat labore amet laborum pariatur pariatur fugiat quis consectetur sit anim. </a>
      </el-tab-pane>
      <el-tab-pane label="站内消息" name="message">
        <a href="#"
          >Culpa qui sit do dolor et non ex elit. Eu voluptate deserunt aute est officia proident sunt laboris.
        </a>
        <a href="#"
          >Culpa qui sit do dolor et non ex elit. Eu voluptate deserunt aute est officia proident sunt laboris.
        </a>
        <a href="#"
          >Culpa qui sit do dolor et non ex elit. Eu voluptate deserunt aute est officia proident sunt laboris.
        </a>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.notification {
  @apply relative;
  .lists {
    @apply absolute bg-white p-2 rounded-md shadow-md right-[20px] w-[300px] z-10 text-xs;
    a {
      @apply truncate overflow-hidden block border-b my-2 pb-1 hover:text-purple-600;
    }
  }
}
</style>
